<template>
  <div class="mainConternt">
    <div class="successHeader">
      <img src="../../../assets/images/shopCar/success.png" alt="">
    </div>
    <div class="pathBtn">
      <span class="btn btn1" @click="clickToPage(1)">查看订单</span>
      <span class="btn btn2" @click="clickToPage(2)">返回首页</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {}
  },
  mounted() {
    this.pushHistory()
    // 监听返回事件
    window.addEventListener('popstate', () => {
      this.$router.push({ name: 'shop-car' })
    }, false)
  },
  methods: {
    // 取消返回到上一页
    pushHistory() {
      const state = {
        title: 'title',
        url: '#'
      }
      window.history.pushState(state, 'title', '#')
    },
    clickToPage(key) {
      let name = ''
      let query = {}
      if (key === 1) {
        name = 'order-list'
        query = {
          id: this.$route.query.id
        }
      } else if (key === 2) {
        name = 'dashboard'
      }
      this.$router.push({ name: name, query: query })
    }
  }

}
</script>

<style lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .mainConternt{
    width: 100%;
    height: 100%;
    background-color: #fff;
    .successHeader{
      height: pxCalc(250px);
      width: 100%;
      position: relative;
      margin-bottom: pxCalc(125px);
      img{
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: pxCalc(100px);
        height: pxCalc(120px);
      }
    }
    .pathBtn{
      width: 100%;
      height: pxCalc(110px);
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .btn{
        margin: 0 auto;
        text-align: center;
        border: 1px solid #ff7340;
        border-radius: 50px;
        line-height: pxCalc(44px);
        width: pxCalc(260px);
        height: pxCalc(44px);
      }
      .btn1{
        background-color: #ff7340;
        color: #fff;
      }
      .btn2{
        background-color: #fff;
        color: #ff7340;
      }
    }
  }
</style>
